<template>
	<view class="boxSty">
		<view class="swiperBoxSty">
			<swiper class="swiper" circular>
				<swiper-item>
					<view class="swiper-item uni-bg-red">
						<image src="@/static/img/swiper.png" mode="" class="swiperSty"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="infoBox">

			<view class="sendGoodSty">
				<view class="titlSty h-100">
					<view class="title " :class="{activeSty: index == 0}" @click="index = 0">
						<view class="bigRadius">
							<p>大件运输</p>
							<image v-show="index == 0" src="@/static/homePage/1.png"
								style="position: absolute;right: 0;top: -1rpx;display: block;transform: translateX(99%);height:103%;width: 100rpx;">
							</image>
						</view>
						<p v-if="index == 0" class="lineSty"></p>
					</view>
					<view class="title" :class="{activeStySmall: index == 1}" @click="index = 1">
						<view class="bigRadius">
							<p>小件快递</p>
							<image v-show="index == 1" src="@/static/homePage/2.png"
								style="position: absolute;left: 0;top: -1rpx;display: block;transform: translateX(-99%);height:103%;width: 100rpx;">
							</image>
						</view>
						<p v-if="index == 1" class="lineSty"></p>
					</view>
				</view>
				<view class="cityBox mt-30">
					<view class="citySty pt-10">
						<city :value="fullBeginAddressKey" @change="e => {
							fullBeginAddress = e.column3.label;
							fullBeginAddressKey = e.column3.value;
						}">
							{{ fullBeginAddress || "请选择城市" }}
						</city>

						<!-- 	<citySelect style="width: 100%;" :text="fullBeginAddress" @confirm="e => {
							fullBeginAddress = e.column3.label;
							fullBeginAddressKey = e.column3.value;
						}" /> -->
					</view>
					<image src="@/static/icon/change.png" mode=""></image>
					<view class="citySty text-right pt-10">

						<city :value="fullEndAddressKey" @change="e => {
							fullEndAddress = e.column3.label;
							fullEndAddressKey = e.column3.value;
						}">
							<div style="text-align: right;">
								{{ fullEndAddress || "请选择城市" }}
							</div>
						</city>

						<!-- <citySelect style="width: 100%;" :text="fullEndAddress" @confirm="e => {
								fullEndAddress = e.column3.label;
								fullEndAddressKey = e.column3.value;
							}" /> -->
					</view>
				</view>
				<view class="goodBtnSty">
					<view class="searchBtn" @click="filterBtn">
						货源搜索
					</view>
					<view class="sendBtn" @click="fahuo">
						立即发货
					</view>
				</view>
			</view>

			<view class="evenly h-200 bg-white m-16 rounded-26">
				<view v-for="(item, index) in iconList" class="center flex-col posti" @click="goFun(index)">
					<view class="">
						<image :src="item.image" mode="" class="w-70 h-58"></image>
						<p class="text-555 fz22 mt-24">{{item.text}}</p>
					</view>
					<!-- <u-badge class="badgeSty" v-if="index == 1" max="99" :value="valueNum" shape="horn" absolute="true"></u-badge> -->
				</view>
			</view>

			<view class="h-280 bg-white m-16 mt-16 memberCenter" @click="vip()">
				<view class="between">
					<view class="showDiscounts">
						<p class="fz28 font-bold text-010">会员中心</p>
						<view class="discountSy">
							<view class="timeShow">
								限时优惠
							</view>
							<p>
								<u-count-down :timestamp="76400" separator="zh" :show-border="true" font-size="16"
									color="#fff" border-color="red" bg-color="red">

								</u-count-down>
							</p>
						</view>
					</view>
					<view class="moreSty">
						更多会员福利 >
					</view>
				</view>
				<image src="@/static/img/memberImg.png" mode="" class="memberSty"></image>
			</view>

			<view class="toSeeSty">
				<view class="seeBox" @click="fanyi">
					<view class="mt-30">
						<span class="blackSty">翻译官·</span>
						<span class="blueSty">解决沟通</span>
					</view>
					<p class="darkSty">3000+翻译为您全面服务</p>
					<view class="seeBtnSty">
						<view class="seeBtn">
							去看看
						</view>
						<image src="@/static/img/translate.png" mode="" class="imgSty"></image>
					</view>
				</view>
				<view class="seeBox" @click="goods">
					<view class="mt-30">
						<span class="blackSty">优质货主·</span>
						<span class="blueSty">专注外贸</span>
					</view>
					<p class="darkSty">优质货源，持续供应</p>
					<view class="seeBtnSty">
						<view class="seeBtn">
							去看看
						</view>
						<image src="@/static/img/earth.png" mode="" class="imgSty"></image>
					</view>
				</view>

			</view>

			<view class="hotBox" @click="vip">
				<view class="between">
					<p class="hotKind">
						热门展会
						<span></span>
					</p>
					<p class="allKind">全部展会 > </p>
				</view>
				<view class="flex-start watchSty">
					<image src="@/static/img/showImage1.png" mode="" class="w-135 h-175 ml-24 mt-26"></image>
					<view class=" mt-26 ml-18">
						<p class="text-010 fz28 font-bold">哈尔滨·2025中国博览会展厅</p>
						<p class="text-555 fz22 mt-18">哈尔滨·南岗区·中央大街135号</p>
						<p class="text-555 fz20 mt-18">2025.03.28 - 2025.03.30 </p>
						<view class="ingSty">
							正在进行中
						</view>
					</view>
					<view class="goSty">
						<p>前往观看</p>
						<image src="@/static/img/lightning.png" mode="" class="w-20 h-35 ml-5 mr-5"></image>
						<p>Go</p>
					</view>
				</view>
				<view class="flex-start watchSty mt-28 pb-38">
					<image src="@/static/img/showImage2.png" mode="" class="w-135 h-175 ml-24 mt-26"></image>
					<view class=" mt-26 ml-18">
						<p class="text-010 fz28 font-bold">哈尔滨·2025中国博览会展厅</p>
						<p class="text-555 fz22 mt-18">哈尔滨·南岗区·中央大街135号</p>
						<p class="text-555 fz20 mt-18">2025.03.28 - 2025.03.30 </p>
						<view class="readySty">
							预热
						</view>
					</view>
					<view class="readybegin">
						<p>未开始</p>
					</view>
				</view>
			</view>

			<view class="cardListBox">
				<view v-for="(item, index) in cardList" class="cardSty" :class="{activeCard: current == index}"
					@click="changeList(index)">
					<p>{{item}}</p>
					<p v-if="current == index" class="ativeLine"></p>
				</view>
			</view>

			<view class="content-inner" style="margin-top: 10px;" v-for="(allInfo,index) in goods_list" :key="index"
				v-if="allInfo.departure.area_info&&current==0">
				<div class="content-time">
					<p class="time">发布时间：<span class="text-010 font-bold">{{allInfo.create_at || ''}}</span></p>
					<p class="kind">{{allInfo.goods_type == 0 ? '大件' : '小件'}} - {{allInfo.demandValue || ''}} </p>
				</div>

				<div class="content-top">
					<div class="colorSty">
						<div class="between items-start">
							<div class="flex route-item">
								<div style="text-align: center;" v-if="allInfo.departure.area_info">
									{{allInfo.departure.area_info.name || ''}}
								</div>
							</div>
							<view class="line mt-15">
								<view v-if="allInfo.transfer_count !== 0" class="text">
									途经{{allInfo.transfer_count}}
								</view>
								<image class="ico" src="/static/img/ico_line2.png" mode="widthFix"></image>
							</view>
							<div class="flex route-item">
								<div style="text-align: center;" v-if="allInfo.reach.area_info">
									{{allInfo.reach.area_info.name || ''}}
								</div>
							</div>
						</div>
						<div class="between items-start mt-10">
							<div class="address" v-if="allInfo.departure.area_info">
								<image class="ico" src="/static/img/chain.png" mode="widthFix"></image>
								<p>{{allInfo.departure.area_info.mergename || ''}}</p>
							</div>
							<div></div>
							<div class="address" v-if="allInfo.reach.area_info">
								<image class="ico" src="/static/img/chain.png" mode="widthFix"></image>
								<p>{{allInfo.reach.area_info.mergename || ''}}</p>
							</div>
						</div>
					</div>
				</div>

				<view class="content-info">
					<span class="info-title">货物信息: </span>
					<span
						class="info-content">{{[allInfo.goods_info.title, allInfo.goods_info.goods_weight+"吨", allInfo.goods_info.goods_volume+'立方米', allInfo.goods_info.package.title].filter(item => item).join('/') || ''}}</span>
				</view>
				<p class="lineCardSty"></p>
				<view class="flex-end mb-16">
					<view class="btnBottomSty" @click="chat(allInfo.tel)">
						在线联系
					</view>
					<view class="btnBottomSty mr-24 ml-30" @click="call(allInfo.tel)">
						打电话
					</view>
				</view>

			</view>
			<view class="center text-gray-500 fz24 pt-20 pb-20" style="margin-bottom: 120rpx;">
				没有更多了
			</view>

		</view>

	</view>
</template>

<script>
	import regionsPicker from './components/regions.vue';
	import {
		regionList
	} from '@/utils/region.js'
	import citySelect from "./components/citySelect.vue"
	import {
		createC2CConversation,
		isBase64,
		time
	} from "@/common/public";
	export default {
		components: {
			citySelect
		},
		data() {
			return {
				countdownTime: 86460, // 倒计时总时间，例如60秒

				value1: 0,
				index: 0,
				current: 0,
				fullBeginAddress: '',
				fullBeginAddressKey: '',
				fullEndAddress: '',
				fullEndAddressKey: '',

				cardList: ['最新货源', '活跃货主', '空闲车源', '平台成交'],
				valueNum: 15,
				type: 'warning',
				iconList: [{
						text: '车源信息',
						image: require("@/static/icon/carIcon.png")
					},
					{
						text: '货源信息',
						image: require("@/static/icon/boxIcon.png")
					},
					{
						text: '企业排行',
						image: require("@/static/icon/cupIcon.png")
					},
					{
						text: '专业代办',
						image: require("@/static/icon/card.png")
					},
					{
						text: '保险业务',
						image: require("@/static/icon/protect.png")
					}
				],
				goods_list: [{
					create_at: '2024-12-21 10:35',
					goods_type: 0,
					demandValue: '运输、通关',
					departure: {
						area_info: {
							name: '哈尔滨',
							mergename: '黑龙江省'
						}
					},
					reach: {
						area_info: {
							name: '莫斯科',
							mergename: '诺克萨斯州'
						}
					},
					transfer_count: 2,
					goods_info: {
						title: '办公用品',
						goods_weight: ' 2',
						goods_volume: '4',
						package: {
							title: '木架卷'
						}
					}
				}, ]
			}
		},
		mounted() {
			this.delivery_select()
		},
		methods: {
			fanyi() {
				uni.navigateTo({
					url: "/pages/message/message/service"
				})
			},
			goods() {
				uni.navigateTo({
					url: "/pages/zWebView/zWebView?url=/pages/forwardingInformation/index"
				})
			},
			vip() {
				uni.$u.toast('敬请期待')
			},
			changeList(index) {
				this.current = index
			},
			fahuo() {
				// uni.switchTab({
				// 	url:'/pages/tabbar/publish/start'
				// })
				uni.navigateTo({
					url: "/pages/zWebView/zWebView?url=/pages/publish/start"
				})
			},
			filterBtn() {
				const params = {
					departure_area: this.fullBeginAddressKey || '',
					reach_area: this.fullEndAddressKey || '',
					goods_type: this.index
				}
				// uni.setStorageSync("filterList", params)
				console.log('999--====', params)
				uni.navigateTo({
					url: "/pages/zWebView/zWebView?url=" + encodeURIComponent(
						`/pages/sourceInformation/index?item=${JSON.stringify(params)}`)
				})
			},
			goFun(index) {
				if (index == '3' || index == '4') {
					uni.$u.toast('敬请期待')
				} else if (index == '2') {
					uni.navigateTo({
						url: "/pages/zWebView/zWebView?url=/pages/forwardingInformation/index"
					})
				} else if (index == '1') {
					uni.navigateTo({
						url: "/pages/zWebView/zWebView?url=/pages/sourceInformation/index"
					})
				} else if (index == '0') {
					uni.navigateTo({
						url: "/pages/zWebView/zWebView?url=/pages/vehicleSourceInformation/index"
					})
				}
			},
			delivery_select() {
				var that = this
				uni.request({
					url: 'https://freight.gluz.com.cn/api/index/delivery_select',
					method: 'POST',
					header: {
						'xzdToken': uni.getStorageSync('xzdToken'),
						'version': uni.getStorageSync('version'),
						'lang': uni.getStorageSync('lang'),
					},
					data: {
						'user_id': uni.getStorageSync('user_id'),
					},
					success: (r) => {

						if (r && r.data && r.data.data) {
							that.goods_list = r.data.data.data
						}
						console.log(that.goods_list);

					},
				})
			},
			chat(mobile) {
				console.log(mobile)
				createC2CConversation(mobile, this)
			},
			call(mobile) {
				let firstChar = mobile.slice(0, 1);
				if (firstChar == 1) {
					uni.makePhoneCall({
						phoneNumber: mobile,
						success: (res) => {},
						fail: (err) => {}
					})
				} else if (firstChar == 9) {
					uni.makePhoneCall({
						phoneNumber: '+7' + mobile,
						success: (res) => {},
						fail: (err) => {}
					})
				} else if (firstChar == 8) {
					uni.makePhoneCall({
						phoneNumber: '+7' + mobile.slice(1),
						success: (res) => {},
						fail: (err) => {}
					})
				} else if (firstChar == 7) {
					uni.makePhoneCall({
						phoneNumber: '+' + mobile,
						success: (res) => {},
						fail: (err) => {}
					})
				} else {
					uni.makePhoneCall({
						phoneNumber: mobile,
						success: (res) => {},
						fail: (err) => {}
					})
				}
			}

		}
	}
</script>


<style lang="less">
	@import url("@/common/common.less");

	page {
		background: #F6F7FB;
	}

	/deep/.uni-picker-custom {
		bottom: 50px !important;
	}

	.boxSty {
		.swiperBoxSty {
			height: 600rpx;
			position: relative;

			.swiper {
				height: 600rpx !important;
			}

			.swiperSty {
				width: 100%;
				height: 578rpx;
			}
		}

		.infoBox {
			width: 100%;
			position: absolute;
			margin-top: -260rpx;
		}

		.sendGoodSty {
			width: 96%;
			height: 400rpx;
			flex-shrink: 0;
			background: #fff;
			margin: 0 auto;
			border-radius: 22rpx;

			.titlSty {
				height: 100rpx;
				background: linear-gradient(97deg, #3F9CFF 44.87%, #66D6E2 91.88%);
				display: flex;
				justify-content: flex-start;
				border-radius: 22rpx 22rpx 0 0;
				overflow-y: hidden;

				.activeSty {
					width: 50%;
					height: 100rpx;
					background: #fff;
					color: #278AFF !important;
					font-family: "PingFang SC";
					font-size: 32rpx;
					font-style: normal;
					font-weight: 600;
					line-height: 110rpx;
					text-align: center;
					// margin-top: -10rpx;
					border-radius: 22rpx 0 0 0;
				}

				.activeStySmall {
					width: 50%;
					height: 100rpx;
					background: #fff;
					color: #278AFF !important;
					font-family: "PingFang SC";
					font-size: 32rpx;
					font-style: normal;
					font-weight: 600;
					line-height: 110rpx;
					text-align: center;
					// margin-top: -10rpx;
					border-radius: 0 22rpx 0 0;
				}

				.title {
					width: 50%;
					height: 110rpx;
					color: #FFF;
					text-shadow: 1rpx 2rpx 4rpx rgba(0, 0, 0, 0.39);
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-style: normal;
					font-weight: 600;
					line-height: 100rpx;
					text-align: center;
					position: relative;
				}

				.lineSty {
					width: 80rpx;
					height: 8rpx;
					margin: 0 auto;
					margin-top: -20rpx;
					flex-shrink: 0;
					border-radius: 23rpx;
					background: linear-gradient(90deg, #0095FF 0%, #66D6E2 100%);
				}

				.bigRadius {
					position: relative;
				}
			}

			.goodBtnSty {
				display: flex;
				justify-content: space-evenly;

				.searchBtn {
					width: 190rpx;
					height: 90rpx;
					flex-shrink: 0;
					border-radius: 500rpx;
					border: 1rpx solid #D8D8D8;
					background: #FFF;
					color: #8C8C8C;
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-style: normal;
					font-weight: 400;
					text-align: center;
					line-height: 90rpx;
					/* 100% */
				}

				.sendBtn {
					width: 428rpx;
					height: 90rpx;
					flex-shrink: 0;
					border-radius: 500rpx;
					background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
					color: #FFF;
					font-family: "PingFang SC";
					font-size: 34rpx;
					font-style: normal;
					font-weight: 600;
					text-align: center;
					line-height: 90rpx;
					/* 100% */
				}
			}

			.cityBox {
				width: 96%;
				height: 90rpx;
				display: flex;
				justify-content: space-evenly;
				margin-bottom: 36rpx;

				.citySty {
					width: 274rpx;
					height: 100%;
					border-bottom: 2rpx solid #F0F0F0;
					color: #0E0E0E;
					font-family: "PingFang SC";
					font-size: 36rpx;
					font-style: normal;
					font-weight: 600;
				}

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}

		.memberCenter {
			width: 96%;
			height: 280rpx;
			border-radius: 22rpx;
			background: linear-gradient(343deg, #FFF 18.41%, #FFF2DF 90.43%);

			// fill: linear-gradient(343deg, #FFF 18.41%, #FFF2DF 90.43%);
			// stroke-width: 1px;
			// stroke: #FFBD00;
			// filter: drop-shadow(0px 1px 20.5px rgba(205, 205, 205, 0.19));
			.memberSty {
				width: 94%;
				height: 155rpx;
				margin-left: 24rpx;
			}

			.showDiscounts {
				display: flex;
				justify-content: flex-start;
				margin: 36rpx 10rpx 24rpx 24rpx;

				.discountSy {
					width: 230rpx;
					height: 36rpx;
					flex-shrink: 0;
					border-radius: 30.302rpx;
					border: 1.122rpx solid #FF9500;
					background: #FFF;
					margin-left: 10rpx;
					margin-top: 5rpx;
					display: flex;

					.timeShow {
						width: 100rpx;
						height: 32rpx;
						flex-shrink: 0;
						background: linear-gradient(90deg, #FF9700 0%, #FFC821 100%);
						color: #FFF;
						font-family: "PingFang SC";
						font-size: 18rpx;
						font-style: normal;
						font-weight: 500;
						line-height: 28rpx;
						padding-left: 14rpx;
						border-radius: 10rpx 0 0 10rpx;
						// margin-left: 4rpx;
					}

					p {
						color: #7D0B00;
						text-align: center;
						font-family: "PingFang SC";
						font-size: 18rpx;
						font-style: normal;
						font-weight: 400;
						line-height: 28rpx;
						margin-left: 8rpx;
					}
				}
			}

			.moreSty {
				width: 138rpx;
				height: 32rpx;
				flex-shrink: 0;
				border-radius: 500rpx;
				background: #FFD79D;
				color: #7D0A00;
				text-align: center;
				font-family: "PingFang SC";
				font-size: 16rpx;
				font-style: normal;
				font-weight: 600;
				line-height: 32rpx;
				/* 100% */
				margin-right: 24rpx;
				margin-top: 8rpx;
			}
		}

		.posti {
			position: relative;
		}

		.badgeSty {
			top: -12rpx;
			right: 0;
		}

		.toSeeSty {
			width: 96%;
			height: 238rpx;
			margin: 0 auto;
			flex-shrink: 0;
			background: #fff;
			display: flex;
			justify-content: space-evenly;
			border-radius: 22rpx;

			.seeBox {
				width: 338rpx;
				height: 222rpx;
				flex-shrink: 0;
				margin-top: 8rpx;
				border-radius: 22rpx;
				background: linear-gradient(180deg, rgba(193, 228, 255, 0.67) 0%, rgba(255, 255, 255, 0.67) 52.5%);

				.blackSty {
					color: #000;
					font-family: MiSans;
					font-size: 30rpx;
					font-style: normal;
					font-weight: 600;
					margin-left: 20rpx;
				}

				.blueSty {
					color: #278AFF;
					font-family: MiSans;
					font-size: 30rpx;
					font-style: normal;
					font-weight: 600;
				}
			}

			.darkSty {
				color: #8C8C8C;
				font-family: MiSans;
				font-size: 20rpx;
				font-style: normal;
				font-weight: 400;
				margin-left: 20rpx;
				margin-top: 15.8rpx;
			}

			.seeBtnSty {
				display: flex;
				justify-content: space-between;
				padding-left: 20rpx;
				padding-right: 34rpx;
				margin-top: 42rpx;

				.seeBtn {
					width: 92rpx;
					height: 40rpx;
					flex-shrink: 0;
					border-radius: 11rpx;
					background: rgba(2, 139, 255, 0.82);
					color: #FFF;
					text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.25);
					font-family: "PingFang SC";
					font-size: 20rpx;
					font-style: normal;
					font-weight: 500;
					text-align: center;
					line-height: 40rpx;
					margin-top: 10rpx;
				}

				.imgSty {
					width: 88rpx;
					height: 88rpx;
					flex-shrink: 0;
					margin-top: -15rpx;
				}
			}
		}

		.hotBox {
			width: 96%;
			// height: 200rpx;
			background-color: #fff;
			margin: 16rpx auto 47rpx;
			border-radius: 22rpx;

			.watchSty {
				position: relative;
			}

			.hotKind {
				color: #0E0E0E;
				font-family: "PingFang SC";
				font-size: 32rpx;
				font-style: normal;
				font-weight: 600;
				margin-top: 38rpx;
				margin-left: 24rpx;

				span {
					display: block;
					width: 54rpx;
					height: 6rpx;
					border-radius: 500rpx;
					background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
					margin: 12rpx auto;
				}
			}

			.ingSty {
				width: 110rpx;
				height: 28rpx;
				flex-shrink: 0;
				border-radius: 4rpx;
				background: #FF5E7F;
				color: #FFF;
				font-family: "PingFang SC";
				font-size: 18rpx;
				font-style: normal;
				font-weight: 600;
				line-height: 24rpx;
				/* 100% */
				text-align: center;
				margin-top: 21rpx;
			}

			.readySty {
				width: 56rpx;
				height: 28rpx;
				flex-shrink: 0;
				border-radius: 4rpx;
				background: #58A0FF;
				color: #FFF;
				font-family: "PingFang SC";
				font-size: 18rpx;
				font-style: normal;
				font-weight: 600;
				line-height: 22rpx;
				/* 100% */
				text-align: center;
				margin-top: 21rpx;
			}

			.readybegin {
				position: absolute;
				bottom: 38rpx;
				right: 24rpx;
				width: 159rpx;
				height: 40rpx;
				flex-shrink: 0;
				border-radius: 500rpx;
				background: #D8D8D8;
				color: #FFF;
				font-family: "PingFang SC";
				font-size: 20rpx;
				font-style: normal;
				font-weight: 500;
				line-height: 40rpx;
				/* 100% */
				text-align: center;
			}

			.allKind {
				color: #535353;
				font-family: "PingFang SC";
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				// margin-top: 20rpx;
				margin-right: 24rpx;
			}

			.goSty {
				display: flex;
				justify-content: center;
				position: absolute;
				bottom: 0;
				right: 24rpx;
				width: 159rpx;
				height: 40rpx;
				flex-shrink: 0;
				border-radius: 500rpx;
				background: linear-gradient(90deg, #FB517A 0%, #FF5264 51%, #FF4740 100%);
				color: #FFF;
				font-family: "PingFang SC";
				font-size: 20rpx;
				font-style: normal;
				font-weight: 500;
				line-height: 40rpx;
				/* 100% */
			}
		}

		.cardListBox {
			// width: 96%;
			display: flex;
			justify-content: space-evenly;
		}

		.cardSty {
			// margin-top: 27rpx;
			color: #535353;
			font-family: "PingFang SC";
			font-size: 26rpx;
			font-style: normal;
			line-height: 26rpx;
			/* 100% */
		}

		.activeCard {
			color: #0E0E0E;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			line-height: 32rpx;
			/* 100% */
		}

		.ativeLine {
			width: 54rpx;
			height: 6rpx;
			flex-shrink: 0;
			border-radius: 500rpx;
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			margin: 12rpx auto;
		}

		.tabbarSty {
			/deep/ .u-icon__icon {
				font-size: 40rpx !important;
			}
		}
	}

	.content-inner {
		width: 96%;
		height: 100%;
		margin: 0 auto;
		margin-top: 18rpx;
		border-radius: 26rpx;
		background-color: #fff;
		overflow: hidden;

		.lineCardSty {
			width: 96%;
			height: 2rpx;
			background: rgba(0, 0, 0, 0.06);
			margin: 18rpx auto;
		}

		.btnBottomSty {
			width: 166rpx;
			height: 60rpx;
			flex-shrink: 0;
			border-radius: 52rpx;
			border: 2rpx solid #E2E2E2;
			background: #FFF;
			color: #0E0E0E;
			font-family: "PingFang SC";
			font-size: 22rpx;
			font-style: normal;
			font-weight: 400;
			text-align: center;
			line-height: 60rpx;
			/* 100% */
		}

		.content-info {
			width: 95%;
			padding-left: 0;
			margin-top: 15rpx;
			margin: 15rpx auto;

			.info-title {
				color: #8C8C8C;
				font-family: "PingFang SC";
				font-size: 20rpx;
				font-style: normal;
				font-weight: 400;
			}

			.info-content {
				color: #0E0E0E;
				font-family: "PingFang SC";
				font-size: 20rpx;
				font-style: normal;
				font-weight: 600;
				margin-left: 20rpx;
			}

			.info {
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;

				.logo {
					width: 44rpx;
					height: 44rpx;
					margin-left: 20rpx;
					margin-top: 0;
					vertical-align: middle;
				}

				.info-title {
					color: #535353;
					font-size: 26rpx;
					font-weight: 400;
				}

				.info-content {
					color: #333333;
					font-weight: 600;
					font-size: 26rpx;
				}

				.info-moeny {
					color: #F53F3F;
					font-weight: 600;
					font-size: 28rpx;
				}
			}
		}
	}

	.content-top {
		width: 97%;
		min-height: 170rpx;
		border-radius: 18rpx;
		background-color: #EDFAFF;
		margin: 0 auto;
		// margin-top: 16rpx;
	}

	.content-time {
		display: flex;
		justify-content: space-between;
		margin-left: 10px;
		margin-right: 10px;

		.time {
			color: #535353;
			font-size: 22rpx;
			margin-top: 25rpx;
		}

		.kind {
			margin-top: 25rpx;
			color: #0E0E0E;
			font-family: "PingFang SC";
			font-size: 22rpx;
			font-style: normal;
			font-weight: 600;
		}
	}

	.colorSty {
		margin: 30rpx 16rpx 20rpx 16rpx;
		padding-top: 44rpx;
		padding-bottom: 20rpx;

		.time {
			color: #666666;
			font-size: 22rpx;
			margin-left: 6rpx;
		}

		.kind {
			color: #666666;
			font-size: 22rpx;
			margin-left: 6rpx;
		}

		.boxSty {
			border-radius: 0 0 40rpx 40rpx;
		}

		.address {
			width: 250rpx;
			font-size: 22rpx;
			color: #666;
			display: flex;
			align-items: flex-start;
			justify-content: center;

			.ico {
				flex-shrink: 0;
				width: 28rpx;
				height: 28rpx;
				margin-right: 6rpx;
				margin-top: 6rpx;
			}
		}

		.line {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.text {
				color: #278AFF;
				font-size: 26rpx;
				font-weight: 500;
				line-height: 28rpx;
				// margin-top: 20rpx;
			}

			.ico {
				width: 114rpx;
			}
		}

		.route-item {
			width: 276rpx;
			align-items: flex-start;
			justify-content: center;
			font-size: 36rpx;
			font-weight: bold;
			color: #0E0E0E;
		}

	}
</style>